<template>
  <div class="home-container">
    <div class="welcome-section">
      <h1>欢迎使用测试平台</h1>
      <p>这里是测试平台的首页，您可以通过左侧菜单访问各个功能模块。</p>
    </div>
    
    <div class="tabs-section">
      <el-tabs type="card" class="main-tabs" v-model="activeTab">
        <el-tab-pane label="Web 测试" name="webui">
          <div class="tab-content">
            <div class="statistics-cards">
              <el-card class="stat-card">
                <div class="stat-title">
                  Web测试计划 <el-tooltip content="Web UI测试项目总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">5</div>
                <div class="stat-footer">较昨日新增：0</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  模块总数 <el-tooltip content="Web UI测试接口总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">5</div>
                <div class="stat-footer">较昨日新增：0</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  用例总数 <el-tooltip content="Web UI测试用例总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">100</div>
                <div class="stat-footer">较昨日新增：5</div>
              </el-card>
            </div>
            
            <div class="charts-section">
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>Web 模块统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="webuiInterfaceChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>Web 模块用例数统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="webuiUserChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="App 测试" name="appui">
          <div class="tab-content">
            <div class="statistics-cards">
              <el-card class="stat-card">
                <div class="stat-title">
                  APP测试计划 <el-tooltip content="App UI测试项目总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">8</div>
                <div class="stat-footer">较昨日新增：1</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  模块总数 <el-tooltip content="App UI测试接口总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">5</div>
                <div class="stat-footer">较昨日新增：2</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  用例总数 <el-tooltip content="App UI测试用例总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">100</div>
                <div class="stat-footer">较昨日新增：3</div>
              </el-card>
            </div>
            
            <div class="charts-section">
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>App 模块统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="appuiInterfaceChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>App 模块用例数统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="appuiUserChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="接口测试" name="api">
          <div class="tab-content">
            <div class="statistics-cards">
              <el-card class="stat-card">
                <div class="stat-title">
                  接口测试计划 <el-tooltip content="接口测试项目总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">12</div>
                <div class="stat-footer">较昨日新增：2</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  接口总数 <el-tooltip content="接口测试接口总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">52</div>
                <div class="stat-footer">较昨日新增：8</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  用例总数 <el-tooltip content="接口测试用例总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">312</div>
                <div class="stat-footer">较昨日新增：12</div>
              </el-card>
            </div>
            
            <div class="charts-section">
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>接口测试模块接口数统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="apiInterfaceChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>接口测试模块用例数统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="apiUserChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="性能测试" name="performance">
          <div class="tab-content">
            <div class="statistics-cards">
              <el-card class="stat-card">
                <div class="stat-title">
                  性能测试计划 <el-tooltip content="性能测试项目总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">6</div>
                <div class="stat-footer">较昨日新增：1</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  模块总数 <el-tooltip content="性能测试接口总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">5</div>
                <div class="stat-footer">较昨日新增：3</div>
              </el-card>
              <el-card class="stat-card">
                <div class="stat-title">
                  用例总数 <el-tooltip content="性能测试用例总数" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="stat-number">42</div>
                <div class="stat-footer">较昨日新增：2</div>
              </el-card>
            </div>
            
            <div class="charts-section">
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>性能测试模块统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="perfInterfaceChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
              <el-card class="chart-card">
                <div slot="header" class="chart-header">
                  <span>性能测试模块用例数统计</span>
                  <i class="el-icon-more"></i>
                </div>
                <div class="chart-content">
                  <div ref="perfUserChart" style="width: 100%; height: 100%;"></div>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Home',
  data() {
    return {
      activeTab: 'webui',
      charts: {},
      chartData: {
        webui: {
          interface: {
            projects: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [20, 20, 20, 20, 20],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          },
          user: {
            users: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [35, 25, 15, 10, 15],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          }
        },
        appui: {
          interface: {
            projects: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [20, 20, 20, 20, 20],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          },
          user: {
            users: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [30, 25, 20, 15, 10],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          }
        },
        api: {
          interface: {
            projects: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [15, 12, 10, 8, 7],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          },
          user: {
            users: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [90, 70, 60, 50, 42],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          }
        },
        performance: {
          interface: {
            projects: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [20, 20, 20, 20, 20],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          },
          user: {
            users: ['文件管理器', '保险箱', '影视中心', '音乐播放器', '存储管理器'],
            values: [12, 10, 8, 7, 5],
            colors: ['#FFB74D', '#4CAF50', '#2196F3', '#E91E63', '#9C27B0']
          }
        }
      }
    }
  },
  watch: {
    activeTab: {
      handler(newTab) {
        this.$nextTick(() => {
          this.initTabCharts(newTab)
        })
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initTabCharts(this.activeTab)
    })
  },
  methods: {
    initTabCharts(tab) {
      const chartRefs = {
        webui: ['webuiInterfaceChart', 'webuiUserChart'],
        appui: ['appuiInterfaceChart', 'appuiUserChart'],
        api: ['apiInterfaceChart', 'apiUserChart'],
        performance: ['perfInterfaceChart', 'perfUserChart']
      }

      // 初始化当前标签页的图表
      const interfaceChart = echarts.init(this.$refs[chartRefs[tab][0]])
      const userChart = echarts.init(this.$refs[chartRefs[tab][1]])

      // 保存图表实例
      this.charts[tab] = {
        interface: interfaceChart,
        user: userChart
      }

      // 设置图表配置
      interfaceChart.setOption(this.getChartOption('interface', tab))
      userChart.setOption(this.getChartOption('user', tab))
    },
    getChartOption(type, tab) {
      const data = this.chartData[tab][type]
      
      // 所有标签页都使用饼图配置
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'middle',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 12,
          textStyle: {
            fontSize: 12,
            width: 100,
            overflow: 'truncate'
          }
        },
        series: [{
          name: type === 'interface' ? '模块分布' : '用例数量',
          type: 'pie',
          radius: ['35%', '60%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: true,
          label: {
            show: true,
            position: 'inside',
            formatter: '{d}%',
            fontSize: 12,
            color: '#fff'
          },
          labelLine: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
          data: (type === 'interface' ? data.projects : data.users).map((name, index) => ({
            name,
            value: data.values[index],
            itemStyle: {
              color: data.colors[index]
            }
          }))
        }]
      }
    }
  },
  beforeDestroy() {
    // 销毁所有图表实例
    Object.values(this.charts).forEach(charts => {
      Object.values(charts).forEach(chart => {
        chart.dispose()
      })
    })
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px 0 0 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.welcome-section {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 20px;
}

.welcome-section h1 {
  font-size: 28px;
  margin-bottom: 15px;
}

.tabs-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.statistics-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.stat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 16px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  margin: 15px 0;
  color: #303133;
}

.stat-footer {
  font-size: 14px;
  color: #909399;
}

.charts-section {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.chart-card {
  flex: 1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-content {
  height: 400px;
}

/* Element UI 覆盖样式 */
.el-card {
  margin-bottom: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  border: 1px solid #dcdfe6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #fff;
  border-top: 2px solid #409EFF;
}

.tab-content {
  background-color: #fff;
  height: 100%;
  border: 1px solid #dcdfe6;
  border-top: none;
  padding: 20px;
}
</style> 